<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="web/templates/ui.xhtml">

	<ui:define name="title">
		<h:outputText value="Registro de Usuarios" />
	</ui:define>
	<ui:define name="sidebar">
		<div class="widget">
			<div class="title">
				<div class="inner">
					<h3>
						<h:outputText value="Menú" />
					</h3>
				</div>
			</div>
			<!-- MENU PERFIL ADMINISTADOR -->
			<ui:include src="menu.xhtml" />
		</div>
	</ui:define>
	<ui:define name="content">
		<div class="page-header">
			<h3>
				<h:outputText value="Administración de Usuarios" />
			</h3>
		</div>
		<div class="subTitle">
			<ol class="breadcrumb">
				<li><a href="index.jsf"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">Registro</li>
			</ol>
		</div>
		<div class="page-subheader">
			<h3>Datos Personales</h3>
		</div>
		<div class="gridContent">
			<div class="inner">
				<h:form id="form">
				<p:messages id="messages"  autoUpdate="true" />
						<div class="row">
							<div class="col-sm-3 form-group">
								<p:outputLabel for="txtDir" value="Login de Usuario" />
								<p:inputText id="txtDir" value="#{usuarioService.usuario.usuario}"  maxlength="30" autocomplete="off" 
								requiredMessage="Login de Usuario: Campo Obligatorio." 
								validatorMessage="Login de usuario: Debe tener como mínimo 5 caracteres."
								disabled="#{usuarioService.editar}" 
								required="true" style="text-transform: uppercase">
									<p:ajax event="keyup" update="mensajeValidaLogin panelBotones" listener="#{usuarioService.verificaLogin}" />
									<f:validateLength minimum="5" />
								</p:inputText>
							</div>
							<div class="col-sm-6 form-group">
								<p:panel id="mensajeValidaLogin">
								<br/>
								<h:outputText id="loginCorrecto" value="#{usuarioService.textoValidaLogin}" rendered="#{usuarioService.loginCorrecto}" />
								<div style="color: red;">
								<h:outputText id="loginIncorrecto" value="#{usuarioService.textoValidaLogin}" rendered="#{!usuarioService.loginCorrecto}"/>
								</div></p:panel>
							</div>
						</div>
						<div class="row">	
							<div class="col-sm-4 form-group">
								<p:outputLabel for="txtDNI" value="Documento de Identidad" />
								<div class="input-group">
									<p:inputMask id="txtDNI" value="#{usuarioService.usuario.dni}"
										maxlength="8" onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));" 
										required="true"
					                    requiredMessage="Documento de Identidad: Campo Obligatorio." 
										validatorMessage="Documento de Identidad: debe tener 8 caracteres."
										disabled="#{usuarioService.editar}" autocomplete="off">
										<f:validateLength minimum="8" maximum="8"  />
										<p:ajax event="keyup" update="messages panelReniec panelBotones" listener="#{usuarioService.handleKeyEvent}" />							
									</p:inputMask>
									<span class="input-group-btn">
										<p:commandButton id="btnReniec" styleClass="btn btn-default" 
														 process="@this" update="btnGuardar txtApePat txtApeMat txtNombres" 
														 value="Reniec"  actionListener="#{usuarioService.obtenerPersona}" 
														 disabled="#{usuarioService.editar}" />
									</span>
								</div>
							</div>
						</div>
						
						<div class="row">
						<p:panel id="panelReniec">
							<div class="col-sm-4 form-group">
								<p:outputLabel value="Apellido Paterno" for="txtApePat" />
								<p:inputText id="txtApePat" value="#{usuarioService.usuario.apellidoPaterno}" disabled="true"/>
							</div>
							<div class="col-sm-4 form-group">
								<p:outputLabel value="Apellido Materno" for="txtApeMat" />
								<p:inputText id="txtApeMat" value="#{usuarioService.usuario.apellidoMaterno}" disabled="true"/>
							</div>
							<div class="col-sm-4 form-group">
								<p:outputLabel value="Nombre (s)" for="txtNombres" />
								<p:inputText id="txtNombres" value="#{usuarioService.usuario.nombres}" disabled="true"/>
							</div>
							</p:panel>
						</div>
						
						<div class="row">
							<div class="col-sm-4 form-group">
								<p:outputLabel for="txtEmail" value="Email" />
								<p:inputText id="txtEmail" value="#{usuarioService.usuario.email}" required="true" 
								autocomplete="off" maxlength="250" 
								disabled="#{usuarioService.usuario.perfilId == 5 or usuarioService.usuario.perfilId == 6}"
								requiredMessage="Email: Campo Obligatorio." styleClass="text-transform-none">
									<p:ajax event="keyup" listener="#{usuarioService.verificaEmail}" update="messages panelBotones" />
								</p:inputText>
							</div>
							<c:if test="#{usuarioService.usuario.perfilId == 5 or usuarioService.usuario.perfilId == 6}">
							<div class="col-sm-4 form-group">
								<p:outputLabel for="cboPerfil" value="Perfil" />
								<h:selectOneMenu id="cboPerfil" value="#{usuarioService.usuario.perfilId}"
								disabled="true" 
								required="true" requiredMessage="Perfil: Campo Obligatorio.">
									<f:selectItem itemLabel="SELECCIONAR" itemValue="" noSelectionOption="true"/>
									<f:selectItems value="#{usuarioService.listaPerfiles}"></f:selectItems>
								</h:selectOneMenu>
							</div>
							</c:if>
							<c:if test="#{usuarioService.usuario.perfilId != 5 and usuarioService.usuario.perfilId != 6}">
							<div class="col-sm-4 form-group">
								<p:outputLabel for="cboPerfilUsuario" value="Perfil" />
								<h:selectOneMenu id="cboPerfilUsuario" value="#{usuarioService.usuario.perfilId}"
								required="true" requiredMessage="Perfil: Campo Obligatorio.">
									<f:selectItem itemLabel="SELECCIONAR" itemValue="" noSelectionOption="true"/>
									<f:selectItems value="#{usuarioService.listaPerfilesUsuario}"></f:selectItems>
								</h:selectOneMenu>
							</div>
							</c:if>
						</div>
						<p:panel id="panelBotones">		
						<div class="btnAction row no-gutter">
							<div class="row no-gutter text-right">
								<p:commandButton id="btnGenerarClave" disabled="#{usuarioService.noGrabo}" styleClass="btn btn-success " 
								icon="ui-menuitem-icon ui-icon fa fa-refresh" iconPos="right" update=":form" value="Generar Nueva Clave" 
								actionListener="#{usuarioService.generarClave}" >
									<p:confirm header="Confirmación" message="¿Esta seguro de generar nueva clave?" icon="ui-icon-alert" />
								</p:commandButton>
								&nbsp;&nbsp;
								<p:commandLink immediate="true" styleClass="btn btn-view" style="padding: 10px;" value="Cancelar" action="usuarios_listado.jsf">
									<p:confirm header="Confirmación" message="¿Esta seguro de cancelar el registro de Usuario?" icon="ui-icon-alert" />
								</p:commandLink>
								&nbsp;&nbsp;
								<p:commandButton id="btnGuardar" disabled="${usuarioService.deshabilitaGuardar}" styleClass="btn btn-success" 
								icon="ui-menuitem-icon ui-icon fa fa-save" iconPos="right" update=":form" value="Guardar" 
								actionListener="#{usuarioService.ingresarUsuario}" >
									<p:confirm header="Confirmación" message="¿Esta seguro de guardar el registro de Usuario?" icon="ui-icon-alert" />
								</p:commandButton>
								
							</div>
						</div>
						</p:panel>

				</h:form>
			</div>
		</div>		
		<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" closeOnEscape="true" rendered="true">
			<p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		</p:confirmDialog>
	</ui:define>
</ui:composition>